* {
    margin: 0px;
    padding: 0px;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.float {
    float: left;
}

li {
    list-style: none;
}

.iconfont {
    font-weight: bold;
}

.bg {
    width: 1354px;
    height: 598px;
    background: linear-gradient(to bottom, #6a91c8, #a3beed);
}

.box_border {
    border-radius: 9px;
    border: 10px solid #bfd2f0;
    background-color: #bfd2f0;
}

.box {
    width: 1200px;
    height: 562px;
    border-radius: 9px;
    background-color: white;
}

/* 左边导航 */
.leftBox {
    width: 128px;
    height: 562px;
}

.leftBox h2 {
    width: 100%;
    height: 90px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    line-height: 90px;
}

.leftBox ul {
    width: 20px;
    margin: 0px auto;
    margin-bottom: 132px;
}

.leftBox li {
    margin-bottom: 40px;
}

.leftBox li span {
    font-size: 20px;
}

.leftBox li:nth-child(n+2) span {
    color: #77787a;
}

.leftBox .fh {
    width: 100%;
    height: 98px;
    text-align: center;
    line-height: 98px;
}

/* 中间内容展示 */
.contBox {
    width: 770px;
    height: 562px;
    background-color: #f0f4fd;
    overflow: scroll;
}

.SearchBox {
    width: 100%;
    height: 90px;
}

.inputBox {
    width: 676px;
    height: 40px;
    border-radius: 7px;
    margin: 24px 0px;
    background-color: white;
    box-shadow: 0px 5px 10px rgb(175, 175, 175);
    line-height: 40px;
}

.SearchBox input {
    width: 656px;
    height: 40px;
    border: unset;
    outline: none;
    border-radius: 7px;
    text-indent: 1em;
}

.SearchBox span {
    margin-left: -10px;
}

.QuickBox {
    width: 100%;
    height: 145px;
    margin-top: 55px;
    margin-bottom: 70px;
}

.QuickBox h2 {
    font-size: 17px;
}

.contBox h2 {
    margin-left: 40px;
    margin-bottom: 30px;
}

.gridBox ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.gridBox li {
    width: 76px;
    height: 95px;
    float: left;
    text-align: center;
}

.gridBox .iconBox {
    width: 76px;
    height: 76px;
    border-radius: 11px;
    background-color: #6166ff;
    text-align: center;
    line-height: 76px;
    margin-bottom: 7px;
}

.gridBox .iconBox span {
    font-size: 30px;
    color: white;
    font-weight: unset;
}

.gridBox p {
    font-size: 8px;
    color: #888b90;
}

.gridBox li:nth-child(n+5) .iconBox {
    background-color: #242446;
}

.PreviewBox {
    width: 100%;
    margin-bottom: 50px;
}

.PreviewBox .title {
    width: 100%;
    height: 17px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.PreviewBox .title span:nth-child(1) {
    font-size: 17px;
    color: black;
    font-weight: bold;
    margin-left: 41px;
}

.PreviewBox .title span:nth-child(2) {
    font-size: 9px;
    color: #9597ac;
    margin-right: 58px;
}

.PreviewBox li {
    height: 250px;
    float: left;
    border-radius: 9px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-x: 50%;
    background-position-Y: 50%;
}

.PreviewBox li:hover {
    transition: 1s;
    background-size: 110% 110%;
}

.PreviewBox li:nth-child(1) {
    width: 340px;
    background-image: url(../images/image1.jpg);
}

.PreviewBox li:nth-child(2) {
    width: 163px;
    background-image: url(../images/image2.jpg);
}

.PreviewBox li:nth-child(3) {
    width: 163px;
    background-image: url(../images/image3.jpg);
}

.PreviewBox ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.PreviewBox li .time {
    width: 56px;
    height: 22px;
    border-radius: 11px;
    background-color: #bfc7c9;
    font-size: 8px;
    color: white;
    line-height: 22px;
    text-align: center;
    float: right;
    margin: 12px 12px;
}

.PreviewBox .titleBox {
    width: 100%;
    height: 40px;
    position: relative;
    top: 148px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.titleBox .titleText {
    color: rgb(238, 238, 238);
    font-size: 8px;
    line-height: 20px;
    margin-left: 10px;
}

.titleBox .play {
    width: 35px;
    height: 35px;
    background-color: white;
    border-radius: 50%;
    margin-right: 10px;
}

.titleBox .play span {
    font-size: 6px;
}

/* RecentBox */
.RecentBox {
    width: 100%;
}

.RecentBox .title {
    width: 100%;
    height: 17px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.RecentBox .title span:nth-child(1) {
    font-size: 17px;
    color: black;
    font-weight: bold;
    margin-left: 41px;
}

.RecentBox .title span:nth-child(2) {
    font-size: 9px;
    color: #9597ac;
    margin-right: 58px;
}

.RecentBox .fileBox {
    width: 636px;
    height: 160px;
    border-radius: 9px;
    margin: 0px auto;
    padding: 10px 20px;
    background-color: white;
}

.RecentBox .fileBox table {
    text-align: left;
    font-size: 9px;
    border-collapse: collapse;
}

.RecentBox .fileBox th, td {
    padding: 7px 0px;
}

.fileBox table th {
    color: rgb(185, 185, 185);
    font-size: 13px;
}

.fileBox table td {
    white-space: nowrap;
    line-height: 20px;
}

.fileBox table td:nth-child(1) .filesType {
    width: 30px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 5px;
    color: rgb(148, 148, 255);
    margin-right: 10px;
    background-color: rgb(228, 228, 228);
    float: left;
}

.fileBox table td span {
    font-size: 9px;
}

/* 右边内容展示 */
.rightBox {
    width: 254px;
    height: 520px;
    padding: 21px 24px;
    background-color: #e0e8fb;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
}

.DownloadsBox {
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.DownloadsBox h2 {
    font-size: 11px;
    font-weight: bold;
}

.DownloadsBox span {
    font-size: 4px;
    font-weight: bold;
    color: #8a92a9;
    line-height: 55px;
}

.TodayBox .title {
    height: 38px;
    font-size: 9px;
    line-height: 38px;
    color: #949dae;
}

.TodayBox .fileBox {
    height: 55px;
    border-radius: 9px;
    background-color: #eceefb;
}

.TodayBox .leftIcon,
.TodayBox .textBox,
.TodayBox .rightIcon {
    float: left;
    margin-left: 12px;
    margin-top: 10px;
}

.TodayBox .leftIcon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #4a4ef7;
    text-align: center;
    line-height: 32px;
}

.TodayBox .leftIcon span {
    font-size: 22px;
    color: white;
}

.TodayBox .textBox {
    width: 145px;
    height: 32px;
}

.TodayBox .textBox p {
    font-size: 9px;
}

.TodayBox .textBox p:nth-child(2) {
    color: #9496a3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.TodayBox .rightIcon span {
    font-size: 24px;
    color: #9496a3;
    line-height: 35px;
}

.TodayBox {
    margin-bottom: 13px;
}

/* Yesterday */
.Yesterday .title {
    height: 38px;
    font-size: 9px;
    line-height: 38px;
    color: #949dae;
}

.Yesterday .fileBox {
    height: 55px;
    border-radius: 9px;
    background-color: #eceefb;
}

.Yesterday .leftIcon,
.Yesterday .textBox,
.Yesterday .rightIcon {
    float: left;
    margin-left: 12px;
    margin-top: 10px;
}

.Yesterday .leftIcon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #3cbde4;
    text-align: center;
    line-height: 32px;
}

.Yesterday .leftIcon span {
    font-size: 22px;
    color: white;
}

.Yesterday .textBox {
    width: 145px;
    height: 32px;
}

.Yesterday .textBox p {
    font-size: 9px;
}

.Yesterday .textBox div {
    width: 100%;
    height: 4px;
    margin-top: 8px;
    background-color: #dbdcf1;
}

.Yesterday .textBox div span {
    width: 60px;
    display: block;
    height: 4px;
    background-color: #47c2d4;
    float: left;
}

.Yesterday .rightIcon span {
    font-size: 24px;
    color: #9496a3;
    line-height: 35px;
}

/* FileReceived */
.FileReceived {
    width: 100%;
}

.FileReceived h2 {
    height: 75px;
    line-height: 75px;
    font-size: 11px;
}

.FileReceived .photoBox {
    float: left;
    border-left: 2px solid #23253c;
}
.FileReceived .rightBox_FR{
    float: left;
}
.FileReceived .rightBox_FR .yuan,
.FileReceived .rightBox_FR .yuanTop {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #23253c;
}
.FileReceived .rightBox_FR .timeBox {
    float: left;
    width: 100%;
}
.FileReceived .rightBox_FR .timeBox .yuan {
    float: left;
    margin-left: -6px;
    margin-right: 7px;
}

.FileReceived .rightBox_FR .timeBox .yuanTop {
    float: left;
    margin-left: -6px;
    margin-right: 7px;
}

.FileReceived .timeBox .time {
    float: left;
    font-size: 8px;
    color: #9599a4;
}

.FileReceived .rightBox_FR .imgBox {
    margin-left: 11px;
    float: left;
    min-height: 73px;
}

.FileReceived .rightBox_FR .imgBox img {
    width: 69px;
    height: 63px;
    border-radius: 11px;
}

.FileReceived .rightBox_FR .imgBox div {
    width: 69px;
    height: 63px;
    overflow: hidden;
    border-radius: 11px;
    margin: 5px 3px;
    float: left;
}

.FileReceived .rightBox_FR .imgBox img:hover {
    transform: scale(1.5);
    transition: 1s;
}

.FileReceived .rightBox_FR .title {
    width: 100%;
    float: left;
    margin-left: 11px;
    margin-bottom: 13px;
}

.FileReceived .rightBox_FR .title p {
    font-size: 9px;
}

.FileReceived .rightBox_FR .title span {
    color: #a08782;
}
.FileReceived .rightBox_FR .bottonTime .yuanTop{
    position: relative;
    top: 10px;
}